<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>模式对话框</title>

  <style>
    body {
      color: #333;
      font-family: 'Helvetica', arial;
    }

    .wrap {
      padding: 40px;
      text-align: center;
    }

    hr {
      clear: both;
      margin-top: 40px;
      margin-bottom: 40px;
      border: 0;
      border-top: 1px solid #aaa;
    }

    h1 {
      font-size: 30px;
      margin-bottom: 40px;
    }

    p {
      margin-bottom: 20px;
    }

    .btn {
      background: #428bca;
      border: #357ebd solid 1px;
      border-radius: 3px;
      color: #fff;
      display: inline-block;
      font-size: 14px;
      padding: 8px 15px;
      text-decoration: none;
      text-align: center;
      min-width: 60px;
      position: relative;
      transition: color 0.1s ease;
    }

    .btn:hover {
      background: #357ebd;
    }

    .btn.btn-big {
      font-size: 18px;
      padding: 15px 20px;
      min-width: 100px;
    }

    .btn-close {
      color: #aaa;
      font-size: 30px;
      text-decoration: none;
      position: absolute;
      right: 5px;
      top: 0;
    }

    .btn-close:hover {
      color: #919191;
    }

    .modal:before {
      content: "";
      display: none;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
    }

    .modal:target:before {
      display: block;
    }

    .modal:target .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      top: 20%;
    }

    .modal-dialog {
      background: #fefefe;
      border: #333 solid 1px;
      border-radius: 5px;
      margin-left: -200px;
      position: fixed;
      left: 50%;
      top: -100%;
      z-index: 11;
      width: 360px;
      -webkit-transform: translate(0, -500%);
      -ms-transform: translate(0, -500%);
      transform: translate(0, -500%);
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-header,
    .modal-footer {
      padding: 10px 20px;
    }

    .modal-header {
      border-bottom: #eee solid 1px;
    }

    .modal-header h2 {
      font-size: 20px;
    }

    .modal-footer {
      border-top: #eee solid 1px;
      text-align: right;
    }
  </style>

</head>

<body>
  <div class="wrap">
    <a href="#modal-one" class="btn btn-big">打开模式对话框</a>
  </div>

  <div class="modal" id="modal-one" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>这是标题</h2>
        <a href="#" class="btn-close" aria-hidden="true">×</a>
      </div>
      <div class="modal-body">
        <p>哇！这是正文</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn">关闭</a>
        <a href="#" class="btn">保存</a>
      </div>
    </div>
  </div>

</body>

</html>